<!-- 评论页面 -->
<template>
	<view class="comment-page">
		<HeadView :isImg="true" :userInfo="state.trendMessage.UserInfo">
			<template #ident>
				<Ident :userInfo="state.trendMessage.UserInfo" />
			</template>
			<template #attention>
				<Attention v-if="state.trendMessage.UserInfo && !state.trendMessage.UserInfo.IsFollow"
					@update:isFollowUpdate="ev => state.trendMessage.UserInfo.IsFollow = ev" />
			</template>
		</HeadView>
		<view class="dynamic-img">
			<view class="square-item-content">
				<van-text-ellipsis rows="2" :content="state.trendMessage.Text" expand-text="展开" collapse-text="收起" />
			</view>
			<ImageView :imgList="state.trendMessage.Files" v-if="state.trendMessage.Files" />
			<view class="time-box">{{ timerFn(state.trendMessage.AddTime) }}</view>
		</view>
		<view class="content-main-message">
			<ReviewList v-if="state.trendMessage.ID" :isChat="true" :stateId="state.trendMessage.ID" :CommentsList="state.CommentsList"
				:CommentCount="state.trendMessage.CommentCount" :userInfo="state.trendMessage.UserInfo"
				@praiseSelectChange="praiseSelectChange" @sendComentSuccess="sendComentSuccess"
				@sendComentSuccessHf="getCommentsLit" :trendMessage="state.trendMessage" />
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		getCurrentInstance,
		onMounted,
		provide
	} from "vue"
	import {
		getAuthorization,
		setAuthorization
	} from "@/utils/auth.js"
	import HeadView from "@/components/head/index.vue"
	import ReviewList from "@/pages/home/components/review/reviewList.vue"
	import {
		timer
	} from "@/utils/tool"
	import {
		onLoad
	} from '@dcloudio/uni-app'
	let {
		proxy
	} = getCurrentInstance()

	import {
		TrendOne,
		VisitorUser, // 获取动态详情
		TrendOneComments, // 获取评论列表
	} from "@/api/list/index.js"
	const state = reactive({
		show: false,
		trendMessage: {
			UserInfo: {
				IsFollow: false
			}
		},
		PageIndex: 1,
		PageSize: 20,
		CommentsList: []
	})

	const reviewFn = () => {
		state.show = true
	}

	// 评论成功
	const sendComentSuccess = (data) => {
		state.CommentsList.unshift(data)
	}

	const getOne = async (id) => {
		let data = await proxy.$get(TrendOne + id)
		if (data.code == 200) {
			state.trendMessage = data.data
			VisitorUserFn(data.data)
		}
	}

	const timerFn = (num) => {
		let yM = num ? num.split(' ')[0].split('-') : ""
		return yM ? yM[1] + '月' + yM[2] + '日' : ''
	}

	// 获取评论列表
	const getCommentsLit = async (dataItem) => {
		// PageIndex=1&UserId=151743&PageSize=20
		let params = {
			PageIndex: state.PageIndex,
			PageSize: state.PageSize,
			userId: dataItem.UserInfo.ID
		}
		let data = await proxy.$get(TrendOneComments + dataItem.ID + '/Comments', params)
		if (data.code == 200) {
			state.CommentsList = state.CommentsList.concat(data.data)
		}
	}

	// 修改点赞状态
	const praiseSelectChange = (item) => {
		state.CommentsList.forEach(o => {
			if (o.ID == item.ID) {
				o.IsLike = !o.IsLike
				if (o.IsLike) {
					o.LikeCount++
				} else {
					o.LikeCount--
				}
			}
			if (o.Children && o.Children.length) {
				o.Children.forEach(o1 => {
					o1.IsLike = !o1.IsLike
					if (o1.ID == item.ID) {
						o1.IsLike = !o1.IsLike
						if (o1.IsLike) {
							o1.LikeCount++
						} else {
							o1.LikeCount--
						}
					}
				})
			}
		})
	}

	const VisitorUserFn = async (dataItem) => {
		let params = {
			LookPage: '动态详情',
			visitorPage: '动态详情',
			visitorUserID: dataItem.UserInfo.ID
		}
		let data = await proxy.$post(VisitorUser, params)
		getCommentsLit(dataItem)
	}



	onLoad((options) => {
		getOne(options.id)
	})

	defineExpose({
		reviewFn
	})
</script>

<style lang="scss" scoped>
	.comment-page {
		position: fixed;
		width: 100%;
		height: 100%;
		overflow: auto;
	}

	:deep(.content-swiper-head-left) {
		text {
			color: #333;
		}
	}

	:deep(.view-item-image-head-attention) {
		border-color: #333;
		color: #333;
	}

	.dynamic-img {
		padding: 140rpx 20rpx 20rpx 20rpx;
	}

	.time-box {
		font-size: 20rpx;
		color: #999;
		margin-top: 20rpx;
	}

	:deep(.van-popup) {
		background: none !important;
	}
</style>
